<template>
  <view class="guest-form-container">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-icon" @click="goBack">
        <text>←</text>
      </view>
      <view class="header-title">{{ isEdit ? '编辑入住人' : '添加入住人' }}</view>
    </view>
    
    <!-- 表单内容 -->
    <view class="form-content">
      <view class="form-item">
        <text class="form-label">姓名</text>
        <input 
          class="form-input" 
          v-model="guestInfo.name" 
          placeholder="请输入姓名" 
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">联系电话</text>
        <input 
          class="form-input" 
          v-model="guestInfo.phone" 
          placeholder="请输入11位手机号" 
          maxlength="11"
          type="number"
        />
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="buttons">
      <button class="cancel-btn" @click="goBack">取消</button>
      <button class="save-btn" @click="saveGuest">保存</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 声明页面参数变量
const guestInfo = reactive({
  name: '',
  phone: ''
});
const isEdit = ref(false);
const editIndex = ref(-1);
// 保存事件通道的引用
let eventChannel = null;

onMounted(() => {
  // 获取页面传递的参数
  try {
    // 方法1：通过getCurrentPages获取
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    
    // 尝试不同的方式获取eventChannel
    if (currentPage.$getOpenerEventChannel) {
      eventChannel = currentPage.$getOpenerEventChannel();
    } else if (currentPage.getOpenerEventChannel) {
      eventChannel = currentPage.getOpenerEventChannel();
    } else if (currentPage.eventChannel) {
      eventChannel = currentPage.eventChannel;
    } else if (uni && uni.getOpenerEventChannel) {
      eventChannel = uni.getOpenerEventChannel();
    } else {
      console.error('无法获取事件通道');
    }
    
    // 监听参数
    if (eventChannel) {
      eventChannel.on('guestData', (data) => {
        if (data) {
          console.log('接收到参数:', data);
          guestInfo.name = data.name || '';
          guestInfo.phone = data.phone || '';
          isEdit.value = data.isEdit || false;
          editIndex.value = data.editIndex || -1;
        }
      });
    }
  } catch (error) {
    console.error('获取事件通道失败:', error);
  }
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 保存入住人信息
const saveGuest = () => {
  // 验证表单
  if (!guestInfo.name.trim()) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none'
    });
    return;
  }
  
  if (!guestInfo.phone.trim()) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    });
    return;
  }
  
  if (!/^1[3-9]\d{9}$/.test(guestInfo.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    });
    return;
  }
  
  try {
    // 准备要返回的数据
    const guestData = {
      name: guestInfo.name,
      phone: guestInfo.phone,
      isEdit: isEdit.value,
      editIndex: editIndex.value
    };
    
    console.log('准备返回数据:', guestData);
    
    // 使用保存的eventChannel
    if (eventChannel) {
      // 先发送数据
      eventChannel.emit('saveGuest', guestData);
      
      // 等待一小段时间确保数据发送完成
      setTimeout(() => {
        // 返回上一页
        uni.navigateBack();
      }, 100);
    } else {
      console.error('无法获取事件通道');
      uni.showToast({
        title: '保存失败，请重试',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('保存数据失败:', error);
    uni.showToast({
      title: '数据保存发生错误，请重试',
      icon: 'none'
    });
  }
};
</script>

<style lang="scss">
.guest-form-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

// 头部导航
.header {
  position: relative;
  height: 100rpx;
  background: linear-gradient(135deg, #1E90FF, #4682B4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
  .back-icon {
    position: absolute;
    left: 30rpx;
    font-size: 40rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    letter-spacing: 2rpx;
  }
}

// 表单内容
.form-content {
  padding: 40rpx 30rpx;
  background-color: #ffffff;
  margin: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .form-item {
    margin-bottom: 30rpx;
    
    .form-label {
      display: block;
      font-size: 30rpx;
      color: #333;
      margin-bottom: 15rpx;
      font-weight: bold;
    }
    
    .form-input {
      width: 100%;
      height: 90rpx;
      padding: 0 20rpx;
      border: 1px solid #e0e0e0;
      border-radius: 8rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      background-color: #f9f9f9;
    }
  }
}

// 底部按钮
.buttons {
  display: flex;
  padding: 30rpx;
  justify-content: space-between;
  margin-top: auto;
  
  button {
    width: 46%;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    border-radius: 45rpx;
  }
  
  .cancel-btn {
    background-color: #f5f5f5;
    color: #666;
    border: 1px solid #e0e0e0;
  }
  
  .save-btn {
    background: linear-gradient(135deg, #1E90FF, #4682B4);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(30, 144, 255, 0.3);
    
    &:active {
      opacity: 0.9;
    }
  }
}
</style> 